<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自有运力管理</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">自有运力管理</div>
            
            <!-- 运力概览统计 -->
            <div class="fleet-overview">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card class="overview-card total">
                            <div class="overview-item">
                                <div class="overview-number">{{ fleetStats.total }}</div>
                                <div class="overview-label">总车辆数</div>
                                <div class="overview-icon"><i class="el-icon-truck"></i></div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card active">
                            <div class="overview-item">
                                <div class="overview-number">{{ fleetStats.active }}</div>
                                <div class="overview-label">运行中</div>
                                <div class="overview-icon"><i class="el-icon-position"></i></div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card maintenance">
                            <div class="overview-item">
                                <div class="overview-number">{{ fleetStats.maintenance }}</div>
                                <div class="overview-label">维护中</div>
                                <div class="overview-icon"><i class="el-icon-setting"></i></div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card idle">
                            <div class="overview-item">
                                <div class="overview-number">{{ fleetStats.idle }}</div>
                                <div class="overview-label">闲置</div>
                                <div class="overview-icon"><i class="el-icon-time"></i></div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 功能选项卡 -->
            <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                <el-tab-pane label="车辆台账" name="vehicles">
                    <!-- 查询条件 -->
                    <div class="query-section">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-input v-model="vehicleQuery.plateNumber" placeholder="车牌号" clearable></el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-select v-model="vehicleQuery.vehicleType" placeholder="车辆类型" clearable>
                                    <el-option label="冷藏车" value="refrigerated"></el-option>
                                    <el-option label="冷藏拖车" value="trailer"></el-option>
                                    <el-option label="移动冷库" value="mobile_cold"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="6">
                                <el-select v-model="vehicleQuery.status" placeholder="车辆状态" clearable>
                                    <el-option label="运行中" value="active"></el-option>
                                    <el-option label="维护中" value="maintenance"></el-option>
                                    <el-option label="闲置" value="idle"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="6">
                                <el-button type="primary" @click="searchVehicles">查询</el-button>
                                <el-button @click="resetVehicleQuery">重置</el-button>
                                <el-button type="success" @click="addVehicle">新增车辆</el-button>
                            </el-col>
                        </el-row>
                    </div>

                    <!-- 车辆列表 -->
                    <div class="vehicle-list">
                        <el-table :data="vehicleData" border style="width: 100%">
                            <el-table-column prop="plateNumber" label="车牌号" width="120"></el-table-column>
                            <el-table-column prop="vehicleType" label="车辆类型" width="120"></el-table-column>
                            <el-table-column prop="brand" label="品牌型号" width="150"></el-table-column>
                            <el-table-column prop="capacity" label="载重(吨)" width="100"></el-table-column>
                            <el-table-column prop="tempRange" label="温度范围" width="120"></el-table-column>
                            <el-table-column prop="driver" label="司机" width="100"></el-table-column>
                            <el-table-column prop="status" label="状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="getStatusType(scope.row.status)">
                                        {{ getStatusText(scope.row.status) }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="mileage" label="总里程(km)" width="120"></el-table-column>
                            <el-table-column prop="lastMaintenance" label="上次保养" width="120"></el-table-column>
                            <el-table-column label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="viewVehicleDetail(scope.row)">详情</el-button>
                                    <el-button size="mini" type="primary" @click="editVehicle(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="warning" @click="scheduleMaintenance(scope.row)">保养</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="维护记录" name="maintenance">
                    <!-- 维护记录查询 -->
                    <div class="query-section">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-input v-model="maintenanceQuery.plateNumber" placeholder="车牌号" clearable></el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-select v-model="maintenanceQuery.type" placeholder="维护类型" clearable>
                                    <el-option label="定期保养" value="regular"></el-option>
                                    <el-option label="故障维修" value="repair"></el-option>
                                    <el-option label="年检" value="inspection"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="6">
                                <el-date-picker
                                    v-model="maintenanceQuery.dateRange"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </el-col>
                            <el-col :span="6">
                                <el-button type="primary" @click="searchMaintenance">查询</el-button>
                                <el-button @click="resetMaintenanceQuery">重置</el-button>
                                <el-button type="success" @click="addMaintenanceRecord">新增记录</el-button>
                            </el-col>
                        </el-row>
                    </div>

                    <!-- 维护记录列表 -->
                    <div class="maintenance-list">
                        <el-table :data="maintenanceData" border style="width: 100%">
                            <el-table-column prop="plateNumber" label="车牌号" width="120"></el-table-column>
                            <el-table-column prop="type" label="维护类型" width="120"></el-table-column>
                            <el-table-column prop="date" label="维护日期" width="120"></el-table-column>
                            <el-table-column prop="description" label="维护内容" width="200"></el-table-column>
                            <el-table-column prop="cost" label="费用(元)" width="100"></el-table-column>
                            <el-table-column prop="mileage" label="里程数(km)" width="120"></el-table-column>
                            <el-table-column prop="technician" label="维护人员" width="120"></el-table-column>
                            <el-table-column prop="nextMaintenance" label="下次保养" width="120"></el-table-column>
                            <el-table-column label="操作" width="150">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="viewMaintenanceDetail(scope.row)">详情</el-button>
                                    <el-button size="mini" type="primary" @click="editMaintenance(scope.row)">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="状态监控" name="monitoring">
                    <!-- 实时监控面板 -->
                    <div class="monitoring-panel">
                        <el-row :gutter="20">
                            <el-col :span="16">
                                <el-card header="车辆实时位置">
                                    <div class="map-container">
                                        <div id="vehicle-map" style="height: 400px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">
                                            <span style="color: #999;">车辆位置地图显示区域</span>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="8">
                                <el-card header="运行状态">
                                    <div class="status-list">
                                        <div v-for="vehicle in monitoringData" :key="vehicle.id" class="status-item">
                                            <div class="vehicle-info">
                                                <span class="plate-number">{{ vehicle.plateNumber }}</span>
                                                <el-tag :type="getStatusType(vehicle.status)" size="mini">
                                                    {{ getStatusText(vehicle.status) }}
                                                </el-tag>
                                            </div>
                                            <div class="vehicle-details">
                                                <p><i class="el-icon-location"></i> {{ vehicle.location }}</p>
                                                <p><i class="el-icon-thermometer"></i> {{ vehicle.temperature }}°C</p>
                                                <p><i class="el-icon-time"></i> {{ vehicle.lastUpdate }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
            </el-tabs>

            <!-- 分页 -->
            <div class="pagination-wrapper">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 车辆详情对话框 -->
        <el-dialog title="车辆详情" :visible.sync="vehicleDetailVisible" width="60%">
            <div v-if="selectedVehicle">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="detail-section">
                            <h4>基本信息</h4>
                            <p><strong>车牌号：</strong>{{ selectedVehicle.plateNumber }}</p>
                            <p><strong>车辆类型：</strong>{{ selectedVehicle.vehicleType }}</p>
                            <p><strong>品牌型号：</strong>{{ selectedVehicle.brand }}</p>
                            <p><strong>载重能力：</strong>{{ selectedVehicle.capacity }}吨</p>
                            <p><strong>温度范围：</strong>{{ selectedVehicle.tempRange }}</p>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="detail-section">
                            <h4>运行状态</h4>
                            <p><strong>当前状态：</strong>
                                <el-tag :type="getStatusType(selectedVehicle.status)">
                                    {{ getStatusText(selectedVehicle.status) }}
                                </el-tag>
                            </p>
                            <p><strong>司机：</strong>{{ selectedVehicle.driver }}</p>
                            <p><strong>总里程：</strong>{{ selectedVehicle.mileage }}公里</p>
                            <p><strong>上次保养：</strong>{{ selectedVehicle.lastMaintenance }}</p>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="vehicleDetailVisible = false">关闭</el-button>
                <el-button type="primary" @click="editVehicle(selectedVehicle)">编辑</el-button>
            </span>
        </el-dialog>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'vehicles',
                    fleetStats: {
                        total: 28,
                        active: 18,
                        maintenance: 3,
                        idle: 7
                    },
                    vehicleQuery: {
                        plateNumber: '',
                        vehicleType: '',
                        status: ''
                    },
                    maintenanceQuery: {
                        plateNumber: '',
                        type: '',
                        dateRange: []
                    },
                    vehicleData: [
                        {
                            id: 1,
                            plateNumber: '湘D88888',
                            vehicleType: '湘莲专用冷藏车',
                            brand: '东风天锦 DFL5180',
                            capacity: 8,
                            tempRange: '2°C~8°C',
                            driver: '王师傅',
                            status: 'active',
                            mileage: 35620,
                            lastMaintenance: '2024-01-15'
                        },
                        {
                            id: 2,
                            plateNumber: '湘D66666',
                            vehicleType: '黄花菜专用冷藏车',
                            brand: '解放虎V',
                            capacity: 12,
                            tempRange: '0°C~15°C',
                            driver: '李师傅',
                            status: 'maintenance',
                            mileage: 42890,
                            lastMaintenance: '2024-01-10'
                        },
                        {
                            id: 3,
                            plateNumber: '湘D99999',
                            vehicleType: '茶油专用冷藏车',
                            brand: '一汽解放 J7',
                            capacity: 15,
                            tempRange: '5°C~25°C',
                            driver: '张师傅',
                            status: 'idle',
                            mileage: 28450,
                            lastMaintenance: '2024-01-20'
                        }
                    ],
                    maintenanceData: [
                        {
                            plateNumber: '湘D88888',
                            type: '定期保养',
                            date: '2024-01-15',
                            description: '机油更换、滤芯清洁、制冷系统检查',
                            cost: 800,
                            mileage: 35620,
                            technician: '袁技师',
                            nextMaintenance: '2024-04-15'
                        },
                        {
                            plateNumber: '湘D66666',
                            type: '故障维修',
                            date: '2024-01-10',
                            description: '制冷压缩机维修，更换制冷剂',
                            cost: 2800,
                            mileage: 42890,
                            technician: '郭技师',
                            nextMaintenance: '2024-02-10'
                        },
                        {
                            plateNumber: '湘D99999',
                            type: '定期保养',
                            date: '2024-01-20',
                            description: '轮胎检查、刹车系统检查、电路检测',
                            cost: 650,
                            mileage: 28450,
                            technician: '陈技师',
                            nextMaintenance: '2024-04-20'
                        }
                    ],
                    monitoringData: [
                        {
                            id: 1,
                            plateNumber: '湘D88888',
                            status: 'active',
                            location: '衡阳市蒸湘区湘莲基地',
                            temperature: 4,
                            lastUpdate: '3分钟前'
                        },
                        {
                            id: 2,
                            plateNumber: '湘D66666',
                            status: 'maintenance',
                            location: '衡阳祁东黄花菜产业园',
                            temperature: 8,
                            lastUpdate: '10分钟前'
                        },
                        {
                            id: 3,
                            plateNumber: '湘D99999',
                            status: 'idle',
                            location: '衡阳南岳茶油加工厂',
                            temperature: 15,
                            lastUpdate: '1小时前'
                        }
                    ],
                    currentPage: 1,
                    pageSize: 10,
                    total: 2,
                    vehicleDetailVisible: false,
                    selectedVehicle: null
                }
            },
            methods: {
                handleTabClick(tab) {
                    this.activeTab = tab.name;
                },
                getStatusType(status) {
                    const typeMap = {
                        'active': 'success',
                        'maintenance': 'warning',
                        'idle': 'info'
                    };
                    return typeMap[status] || 'info';
                },
                getStatusText(status) {
                    const textMap = {
                        'active': '运行中',
                        'maintenance': '维护中',
                        'idle': '闲置'
                    };
                    return textMap[status] || '未知';
                },
                searchVehicles() {
                    this.$message.success('查询完成');
                },
                resetVehicleQuery() {
                    this.vehicleQuery = {
                        plateNumber: '',
                        vehicleType: '',
                        status: ''
                    };
                },
                addVehicle() {
                    this.$message.info('新增车辆功能开发中');
                },
                viewVehicleDetail(row) {
                    this.selectedVehicle = row;
                    this.vehicleDetailVisible = true;
                },
                editVehicle(row) {
                    this.$message.info('编辑车辆功能开发中');
                },
                scheduleMaintenance(row) {
                    this.$confirm('确认为车辆 ' + row.plateNumber + ' 安排保养？', '保养确认', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message.success('保养计划已安排');
                    });
                },
                searchMaintenance() {
                    this.$message.success('查询完成');
                },
                resetMaintenanceQuery() {
                    this.maintenanceQuery = {
                        plateNumber: '',
                        type: '',
                        dateRange: []
                    };
                },
                addMaintenanceRecord() {
                    this.$message.info('新增维护记录功能开发中');
                },
                viewMaintenanceDetail(row) {
                    this.$message.info('查看维护详情功能开发中');
                },
                editMaintenance(row) {
                    this.$message.info('编辑维护记录功能开发中');
                },
                handleSizeChange(val) {
                    this.pageSize = val;
                },
                handleCurrentChange(val) {
                    this.currentPage = val;
                }
            }
        });
    </script>

    <style scoped>
        .fleet-overview {
            margin-bottom: 30px;
        }
        
        .overview-card {
            position: relative;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .overview-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .overview-card.total {
            border-left: 4px solid #409EFF;
        }
        
        .overview-card.active {
            border-left: 4px solid #67C23A;
        }
        
        .overview-card.maintenance {
            border-left: 4px solid #E6A23C;
        }
        
        .overview-card.idle {
            border-left: 4px solid #909399;
        }
        
        .overview-number {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
        }
        
        .overview-label {
            color: #606266;
            margin: 8px 0;
        }
        
        .overview-icon {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 24px;
            color: #409EFF;
            opacity: 0.6;
        }
        
        .query-section {
            background: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        .vehicle-list, .maintenance-list {
            margin-bottom: 20px;
        }
        
        .monitoring-panel {
            margin-bottom: 20px;
        }
        
        .map-container {
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .status-list {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .status-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            margin-bottom: 10px;
            background: #f9f9f9;
            border-radius: 4px;
        }
        
        .vehicle-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .plate-number {
            font-weight: bold;
            color: #409EFF;
        }
        
        .vehicle-details p {
            margin: 5px 0;
            color: #666;
            font-size: 12px;
        }
        
        .vehicle-details i {
            margin-right: 5px;
            color: #409EFF;
        }
        
        .pagination-wrapper {
            text-align: center;
            padding: 20px 0;
        }
        
        .detail-section {
            margin-bottom: 20px;
        }
        
        .detail-section h4 {
            color: #409EFF;
            border-bottom: 2px solid #409EFF;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        
        .detail-section p {
            margin: 10px 0;
            line-height: 1.6;
        }
    </style>
</body>
</html>